<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="{__SERVER}/views/css/style.css" type="text/css" rel="stylesheet" />
    <link href="{__SERVER}/views/css/total.css" type="text/css" rel="stylesheet" />
    <link href="{__SERVER}/views/css/float.css" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="{__SERVER}/views/loginjquery/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{__SERVER}/views/loginjquery/css/slide.css" type="text/css" media="screen" />
    <!-- jQuery - the core -->
    <script src="{__SERVER}/views/loginjquery/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <!-- Sliding effect --> <script src="{__SERVER}/views/loginjquery/js/slide.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBqj3J7glENOqpjNEu4ZpVlO--P8OXj9p0&sensor=false&language=vi"></script>
    <script src="{__SERVER}/views/js/markerclusterer.js"></script>
    <script type="text/javascript">
        var input = document.getElementById('searchTextbox');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);
        var marker = new google.maps.Marker({
            map: map,
            draggable:true
        });

    </script>

</head>
<body>





<div class="header">
    {user}
    <div class="headerc">

        {header}

        {mmenu}

        <a href="{__SERVER}/record/dangtin"> <div class="upload">Đăng Tin</div></a>

    </div>

</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(10.828585,106.628151),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);


        //var center = map.getCenter();
        /*    var point = new google.maps.LatLng(10.828585,106.628151);
        var marker = new google.maps.Marker({
            map: map,
            //draggable:true,
            position: point,
            title:"This is my house"
        });
        marker.setMap(map);*/





        var data = {data};
        var markers = [];
        $.each(data, function(key, value){
            var coor = new google.maps.LatLng(value.lat, value.lng);
            var marker = new google.maps.Marker({
                map: map,
                position: coor,
                title:value.rid
            });

            markers.push(marker);

            var contentString = "{infowindows}";

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

        });
        var markerCluster = new MarkerClusterer(map, markers);


    }
    initialize();
</script>
</body>
</html>